<!-- 显示界面 -->
<template>
  <main class="page-main">
    <div class="page-body">
      <div class="margin-top-10">
        <a-row>
          <a-col :span="6">
            <div class="margin-top-10">
              <!-- 操作按钮 -->

              <a-button type="primary"  @click="handleAddMode">
                <template #icon>
                  <icon icon-name="PlusOutlined"></icon>
                </template>
                添加
              </a-button>
              <a-button danger class="margin-left-20"  @click="handleDeleteMode">
                <template #icon>
                  <icon icon-name="DeleteOutlined"></icon>
                </template>
                删除
              </a-button>
            </div>
            <a-menu mode="inline" :items="dataList" @click="handleMenuClick"></a-menu>
          </a-col>
          <a-col :span="18">
            <Detail></Detail>
          </a-col>
        </a-row>

      </div>
    </div>


    <!-- 新增、编辑的表单-->
    <a-drawer v-model:open="mode.edit" :title="currentId?'修改显示界面':'添加显示界面'" size="large">
      <Form :key="new Date().getTime()" :dataId="currentId" @close="handleCancel" @successed="handleQueryList"/>
    </a-drawer>

    <!-- 删除 -->
    <a-modal v-model:open="mode.delete" title="确定删除">
      <span>确定删除显示界面吗？删除后数据不可恢复</span>
      <template #footer>
        <a-button key="back" @click="handleCancel">取消</a-button>
        <a-button key="submit" type="primary" danger @click="handleDelete">删除</a-button>
      </template>
    </a-modal>

  </main>
</template>
<script lang="ts">
import * as apiUtil from "@/api/ApiUtils";
import * as api from "@/api/SDisplayInterfaceApi";
import Form from "./form.vue"
import Icon from "@/components/Icon.vue"

import { notification } from 'ant-design-vue';
import Detail from "@/views/sDisplayInterfaceDetail/index.vue";

export default {
  components: {
    Detail,
    Icon,
    Form
  },
  data() {
    return {
      //数据列表
      dataList: [],
      //当前操作的数据Id
      currentId: 0,

      //模式
      mode: {
        //编辑模式
        edit: false,
        //删除模式
        delete: false
      }
    }
  },
  methods: {
    /**
     * 查询列表
     */
    handleQueryList() {
      api.getMenuData().then((res) => {
        //请求成功
        if (apiUtil.isSuccessed(res)) {
          if (res.data) {
            this.dataList = res.data;
          }
        } else {
          //请求失败
          notification.error({
            message: "查询失败",
            description: res.message
          });
        }
      })
    },
    handleMenuClick(e) {
      let id = e.item.originItemValue.key;
      this.currentId = id;
      console.log("---",e.item.originItemValue.key);
    },
    /**
     * 删除数据
     */
    handleDelete() {
      api.deleteById(this.currentId).then((res) => {
        if (apiUtil.isSuccessed(res)) {
          notification.success({
            message: "删除成功",
            description: "已删除"
          });
          this.mode.delete = false;
          this.handleQueryList();
        } else {
          //请求失败
          notification.error({
            message: "删除失败",
            description: res.message
          });
        }
      });
    },
    /**
     * 进入新增模式
     */
    handleAddMode() {
      this.currentId = null;
      this.mode.edit = true;
    },
    /**
     * 进入编辑模式
     * @param id 要编辑的数据ID
     */
    handleEditMode(id) {
      this.currentId = id;
      this.mode.edit = true;
    },
    /**
     * 进入删除模式
     * @param index 行号
     * @param row 要删除的数据
     */
    handleDeleteMode() {
      if(this.currentId){
        this.mode.delete = true;
      }else {
        notification.error({
          message: "删除失败",
          description: "请先选择要删除的任务"
        });
      }
    },
    /**
     * 取消编辑/删除操作
     */
    handleCancel() {
      this.mode.edit = false;
      this.mode.delete = false;
      this.currentId = null;
    }

  },
  computed: {
  },
  watch: {},
  mounted() {
    this.handleQueryList();
  }
}
</script>
<style scoped>

</style>